<!--
 * @Author: your name
 * @Date: 2021-12-03 13:53:20
 * @LastEditTime: 2021-12-15 15:13:24
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \gantt-demo\src\components\gantt-elastic.vue
-->
<template>
    <div class="gantt-container">
        <div class="task-list">
            <el-table
                :data="tasks"
                stripe
                style="width: 100%"
                height="100%"
                :header-row-style="{ height: '60px' }"
                :row-style="{ height: '38px' }"
                :cell-style="{ padding: '0' }"
            >
                <el-table-column prop="name" label="name" />
                <el-table-column prop="progress" label="progress" />
            </el-table>
        </div>
        <div id="gantt"></div>
    </div>
</template>
<script lang="javascript">
import * as Gantt from '../../arwind-gantt-module';
import { Transfer } from '../transfer/transfer';
import { TransferType } from '../transfer/transfer.type';
import { mockData } from '../mock/mspdi';
export default {
    data() {
        return {
            transfer: new Transfer(TransferType.MSPDI),
            tasks: []
        };
    },
    mounted() {
        let data = this.$nextTick(() => {
            var gantt = new Gantt.default("#gantt", this.tasks, {
                step: 12,
                // popup_trigger:'mouseover',
                on_click: function (task) {
                    console.log(task)
                    console.log(task.name)
                }
            })
        })
        this.tasks = this.transfer.convert(mockData);
    }
};
</script>
<style lang="scss" scoped>
.gantt-container {
    display: flex;
    justify-content: center;
    .task-list {
        width: 20%;
    }
    #gantt {
        width: 80%;
    }
}
</style>